<template>
  <div>
    <el-card style="margin: 20px">
      <Subject  @handleSearch ="handleSearch"></Subject>
      <el-alert
        title="数据一共17条"
        type="info"
        show-icon
        style="margin-top: 15px"
      >
      </el-alert>
      <el-table :data="questionData">
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="catalog"></el-table-column>
        <el-table-column label="题型" prop="questionType">
          <template #default="scope">
            <!-- data.Status == 0 ? "状态0" : data.Status == 1 ? "状态1" : data.Status == 2 ? "状态2" : "" -->
            {{
              scope.row.questionType == 1
                ? "单选"
                : scope.row.questionType == 2
                ? "多选"
                : "简答"
            }}
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template #default="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate"></el-table-column>
        <el-table-column label="难度" prop="difficulty">
          <template #default="scope">
            {{
              scope.row.difficulty === 1
                ? "简单"
                : scope.row.difficulty == 2
                ? "一般"
                : "困难"
            }}
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template #default="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              plain
              @click="handelPerview(scope.row)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              plain
              @click="handelEdit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="handelDelete(scope.row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-check"
              circle
              plain
              @click="handelCheck(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <PaginAtion
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        :counts="counts"
      ></PaginAtion>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" :data="perviewList">
      <el-descriptions :column="4">
        <el-descriptions-item label="【题型】"
          >{{perviewList.questionType == '1' ? '单选' :perviewList.questionType == '2' ? '多选' :'简答'}}</el-descriptions-item
        >
        <el-descriptions-item label="【编号】"
          >{{perviewList.id}}</el-descriptions-item
        >
        <el-descriptions-item label="【难度】">
          {{perviewList.difficulty == '1' ? '简单' :perviewList.difficulty == '2' ? '一般' :'困难'}}
        </el-descriptions-item>
        <el-descriptions-item label="【标签】">{{perviewList.tags}}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{perviewList.subjectName}}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{perviewList.directoryName}}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{perviewList.direction}}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <!-- 题干部分 -->
      <el-row>
        <el-col>
          <span>【题干】：</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="color: blue">
          <div v-html="perviewList.question"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>
            <span v-if="perviewList.questionType === '1'">单选题</span>
            <span v-else-if="perviewList.questionType === '2'">多选题</span>
            <span v-else>简答题</span>选项：（以下选中的选项为正确答案）
          </span>
        </el-col>
      </el-row>
      <!-- 单选框 -->
      <el-radio-group v-model="radio" v-if="perviewList.questionType === '1'" @change="handelChange">
        <el-row v-for="(item, index) in perviewList.options" :key="index" style="margin:10px 0px">
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <!-- 多选 -->
      <div v-if="perviewList.questionType === '2'">
        <el-row v-for="(item, index) in perviewList.options" :key="index" style="margin:10px 0px">
          <el-checkbox v-model="item.isRight" :disabled="item.isRight === 0" @change="testChange(item)"> {{ item.title }} </el-checkbox>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【参考答案】">
          <el-button type="danger" size="mini">视频答案预览</el-button>
      <el-row style="margin-top:20px;" v-if="isVideoShow">
        <video :src="perviewList.videoURL" controls="controls" class="video"></video>
      </el-row>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【答案解析】"> <div v-html="perviewList.answer"></div> </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【题目备注】"> {{perviewList.remarks}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple } from '@/api/base/users'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import PaginAtion from '@/components/PaginAtion/index'
import { provinces } from '@/api/hmmm/citys'

import Subject from '@/components/Subject'
export default {
  components: {
    PaginAtion,
    Subject
  },
  data () {
    return {
      checkList: ['复选框 B', '复选框 A'],
      params: {
        page: 1,
        pagesize: 10
      },
      dialogVisible: false,
      questionData: [],
      questionTypeList: [],
      difficultyList: [],
      directionList: [],
      simpleList: [],
      creatorList: [],
      province: [],
      city: [],
      subjectList: [],
      catalogList: [],
      tagsList: [],
      formList: {
        keyword: '',
        disabled: ''
      },
      counts: 0,
      perviewList: {},
      radio: 1,
      isVideoShow: false
    }
  },
  created () {
    this.list()
    this.simple()
    this.questionTypeList = questionType
    this.difficultyList = difficulty
    this.directionList = direction
    this.province = provinces()
  },
  methods: {
    handleSizeChange (val) {
      this.params.pagesize = val
      this.list()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(val)
      this.params.page = val
      this.list()
      console.log(`当前页: ${val}`)
    },
    async list () {
      const res = await list(this.params)
      console.log(res)
      this.questionData = res.data.items
      this.counts = res.data.counts
      // console.log(this.questionData)
    },
    // 搜索
    async handleSearch (val) {
      for (const k in val) {
        if (val[k] === '') {
          delete val[k]
        }
      }
      console.log(val)
      this.params = { ...val }
      const res = await list(this.params)
      console.log(res)
      this.questionData = res.data.items
      this.list()
    },
    async simple () {
      const res = await simple()
      this.creatorList = res.data
    },
    // 预览
    async handelPerview (row) {
      this.dialogVisible = true
      const res = await detail(row)
      this.perviewList = res.data
      console.log(this.perviewList)
    },
    // 查看
    handelEdit (row) {
      console.log(row)
      this.$router.push({
        path: 'new',
        query: {
          id: row.id,
          data: row
        }
      })
    },
    handelChange () {
      this.radio = 1
    },
    //  多选框的change事件
    testChange (item) {
      if (item.isRight) {

      } else {
        item.isRight = true
      }
    },
    // 删除
    async handelDelete (id) {
      console.log(id)
      await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await remove(id)
      console.log(res)
      this.$message({
        type: 'success',
        message: '成功删除用户!'
      })
      this.list()
    },
    // 精选
    async handelCheck (row) {
      const result = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)
      // 如果确认就加入精选 否则什么都不做
      if (result === 'confirm') {
        const data = await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        if (data.status === 200) {
          this.$message.success('加入精选成功')
        }
        // 更新题库列表
        this.list()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item__content {
  width: 214px;
}
.text {
  font-size: 12px;
  color: pink;
}
</style>
